import './PersonTypeList.scss'
import { useState } from 'react'
import { useMount, useRequest } from 'ahooks'

import { Http } from '../../../../Common/Api'
import { AnnularTemplate } from './AssetsCharts'

const colorA01 = ['rgba(98, 212, 230, 1)', 'rgba(237, 132, 75, 1)', 'rgba(153, 170, 255, 1)']
const A01List = [
    { uuid: 1, label: '在册员工', value: '在册人员' },
    { uuid: 2, label: '临时工', value: '临时工' },
    { uuid: 3, label: '劳务人员', value: '劳务人员' },
]

export const PersonTypeListA01 = ({ url }) => {
    const [ChartsData, setChartsData] = useState([])
    const [Data, setData] = useState({ 在册人员: 0, 临时工: 0, 劳务人员: 0 })

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setData(res)
            setChartsData(Object.keys(res).map(key => ({ type: key, value: Number(res[key]) })))
        },
    })

    useMount(() => {
        runAsync({ url })
    })

    return (
        <div className="PersonTypeListA01">
            <AnnularTemplate size={{ width: 188, height: 188 }} data={ChartsData} color={colorA01} title="总人数" />
            <div className="List">
                {A01List.map(({ uuid, label, value }, index) => (
                    <div key={uuid}>
                        <div style={{ color: colorA01[index] }}>{label}</div>
                        <div>{Data[value]}人</div>
                    </div>
                ))}
            </div>
        </div>
    )
}
